import React from 'react';
import style from './style.less';

/**
 * 切角标签
 */
const CutCornerTag = ({ backgroundColor = '#f7f7f7', borderColor = '#c6c6c6', fontColor = '#c6c6c6', children }) => (
    <div
        className={style.outer}
        style={{
            background: `linear-gradient(60deg, transparent 6px, ${borderColor} 0) bottom left, linear-gradient(${borderColor}, ${borderColor}) bottom right,
        linear-gradient(${borderColor}, ${borderColor}) top right, linear-gradient(120deg, transparent 6px, ${borderColor} 0) top left`
        }}
    >
        <div
            className={style.inner}
            style={{
                color: fontColor,
                background: `linear-gradient(60deg, transparent 5.5px, ${backgroundColor} 0) bottom left, linear-gradient(${backgroundColor}, ${backgroundColor}) bottom right,
        linear-gradient(${backgroundColor}, ${backgroundColor}) top right, linear-gradient(120deg, transparent 5.5px, ${backgroundColor} 0) top left`
            }}
        >
            {children}
        </div>
    </div>
);
export default CutCornerTag;
